<template>
  <div class="product_detail">
    <el-row class="top_menu" :gutter="20">
      <el-col :span="4" :offset="2">
        <div class="product_name">
          <el-divider direction="vertical"></el-divider>
          <span>{{productDetail.detailTitle}}</span>
          <el-divider direction="vertical"></el-divider>
        </div>
      </el-col>
      <el-col :offset="1" :span="4">
        <div class="menu_item" @click="commentClick">
          <el-divider direction="vertical"></el-divider>
          <span>用户评价</span>
          <el-divider direction="vertical"></el-divider>
        </div>
      </el-col>
      <el-col  :span="5" :offset="4">
        <div class="menu_button">
<!--          <button>加入购物车</button>-->
          <button @click="buyClick">立即购买</button>
        </div>
      </el-col>
    </el-row>

    <div class="detail_connent">
      <div class="detail_content_main" :style="{backgroundImage: 'url(' + (detailImgMain ? detailImgMain : detailImgMain) + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">
        <div class="main_introduce">
          <div class="content" v-for="item in getContentMainArr">{{item}}</div>
        </div>
      </div>

      <div class="detail_content_secondary" :style="{backgroundImage: 'url(' + (detailImgSecondary ? detailImgSecondary : detailImgSecondary) + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">
        <div class="secondary_introduce">
          <div class="content" v-for="item in getContentSecondaryArr">{{item}}</div>
        </div>
      </div>
      <div class="param">
        <img :src="productDetail.paramImgMain">
      </div>
      <div class="param">
        <img :src="productDetail.paramImgSecondary">
      </div>
    </div>
    <bottom-bar></bottom-bar>

  </div>
</template>

<script>
  import {request} from "network/request";
  import BottomBar from "components/bottomBar/BottomBar";
  export default {
    name: "ProductDetail",
    components:{
      BottomBar
    },

    data(){
        return{
          productDetail : {},
          detailImgMain: '',
          detailImgSecondary: '',
        }
    },

    computed: {
      getContentMainArr(){
        let content = '';
        content = this.productDetail.detailContentMain + "";
        return content.split(' ');
      },
      getContentSecondaryArr(){
        let content = '';
        content = this.productDetail.detailContentSecondary + "";
        return content.split('。');
      }
    },

    created() {
      // console.log("我被创建了");
      request({
        url: '/productDetail',
        params: {
          productId: this.$route.query.productId
        }
      }).then(res => {
        this.productDetail = res.data.data;
        this.detailImgMain = this.productDetail.detailImgMain;
        this.detailImgSecondary = this.productDetail.detailImgSecondary;
        // console.log(this.productDetail);
      })
    },
    mounted() {
      // console.log("我被渲染了");
    },
    destroyed() {

    },

    methods:{
      buyClick(){
        this.$router.push({
          path: '/index/buy',
          query: {
            productId: this.$route.query.productId,
          }
        });
      },

      commentClick(){
        this.$router.push({
          path: '/index/comment',
          query: {
            productId: this.$route.query.productId,

          }
        });
      }
    }
  }
</script>

<style vars="{detailImgMain, detailImgSecondary}" scoped>
  .product_detail{
    height: 50px;
    /*background-color: #409EFF;*/
    border-bottom: 2px solid  #E0E0E0;
  }
  .menu_item :hover{
    color: #FF6700;
  }
  .menu_button button{
    color: #FFFFFF;
    font-size: 10px;
    text-align: center;
    width: 40%;
    background-color: #FF6700;
    height: 30px;
  }
  .product_name{
    text-align: center;
  }
  .detail_connent{
    margin-top: 24px;
  }
  .detail_content_main, .detail_content_secondary{
    position: relative;
    width: 100%;
    height: 800px;
  }


  .main_introduce, .secondary_introduce{
    text-align: center;
    position: absolute;
    z-index: 1;
    left: 60%;
    top: 30%;
    color: #FF6700;
  }

  .main_introduce .content, .secondary_introduce .content{
    margin-top: 15px;
  }

  .param img{
    width: 100%;
  }
</style>
